<template>
    <div class="login">

      <div class="login-logo">
        <img class="touXiang2" src="../../images/logo_.png" alt="">
      </div>
      <div class="my-content" :style="{display:disp}">

          <div class="login-inp" >
            <i class="iconfont icon-ai-user" ></i>
            <input type="text" v-model="username" @keyup.enter="loginFn" placeholder="请输入用户名">
          </div>
        <div class="login-inp login-inp2"  >
          <i class="iconfont icon-mima" ></i>
          <input type="password" v-model="password" @keyup.enter="loginFn" placeholder="请输入密码" >
        </div>
        <div class="login-tj" >
          <van-button    @click="loginFn" >登&nbsp;&nbsp;&nbsp;&nbsp;录</van-button>
        </div>
        <div class="login-zc" >
          <van-button type="default"   @click="registerFn" >注&nbsp;&nbsp;&nbsp;&nbsp;册</van-button>
        </div>
      </div>

      <div class="registers" :style="{display:disp2}">
        <div class="registers-content">
          <!--<p style="color:#3C8DBC">注册</p>-->
          <div class="r-gongsi" >
            <span>公司名:</span>
            <input type="text" v-model="company"  placeholder="请输入公司名" >
          </div>
          <van-radio-group v-model="radio" class="r-radio" >
            <van-radio name="0" class="r-radio-c" >经销商</van-radio>
            <van-radio name="1" class="r-radio-c" >代理商</van-radio>
          </van-radio-group>

          <div class="r-names" >
            <span>姓 名:</span>
            <input type="text" v-model="usernames"  placeholder="请输入姓名">
          </div>
          <div class="r-names" >
            <span>手机号:</span>
            <input type="text" v-model="phone"  placeholder="请输入手机号" >
          </div>
          <div  class="r-names" >
            <span>邮 箱:</span>
            <input type="text" v-model="email"  placeholder="请输入邮箱" >
          </div>

          <div class="r-code" >
            <!--<div style="width:50%;border:1px solid #e2e2e2;border-radius:5px;padding:5px 10px;float: left;margin-left: 10px;">-->
            <!---->
            <!--</div>-->
            <input type="text" v-model="code"  placeholder="请输入验证码" style="">
            <van-button  :class="bgc"  @click="getCode" >{{content}}</van-button>
          </div>

          <div class="r-names" >
            <span>账 号</span>
            <input type="text" v-model="accountNumber"  placeholder="请输入账号" >
          </div>

          <div class="r-names" >
            <span>密 码</span>
            <input type="password" v-model="passwords"  placeholder="请输入密码" >
          </div>
          <div class="r-names rr-pwd" >
            <span class="rr-pwd">确认密码</span>
            <input type="password" v-model="password2"  placeholder="请输入再次密码" >
          </div>


          <div class="r-tj" >
            <van-button   @click="sublimt" >注&nbsp;&nbsp;&nbsp;&nbsp;册</van-button>
          </div>
          <div class="r-dl" style="">
            <!--<p style="font-size:12px;color:skyblue;" @click="toSign">去登录</p>-->
            <van-button type="default"   @click="toSign" >去登录</van-button>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  import axios from 'axios';
  import services from "@/index.js";
  import { mapState } from 'vuex';
  import {passport as passportApi} from "@/index.js";
  import cookie from 'js-cookie';
    export default {
        name: "login",
        data(){
          return {
            companyName:"",
            username:"",
            password:"",
            appid:"wx642396f866ee326a",
            AppSecret:"44aba1f7482f02006ecb7fc5838f79c2",
            openID:"",
            loginShow: "none",
            disp: "bloxk",
            disp2: "none",

            bgc: '',
            content: '发送验证码',  // 按钮里显示的内容
            totalTime: 60,      //记录具体倒计时时间
            canClick: true, //添加canClick
            radio: '0',
            company: '', // 公司名
            usernames: '',
            phone: '',
            email: '',
            code: '',
            accountNumber: '',
            passwords: '',
            password2: '',
            clock: ''
          }
        },
      computed: {
        ...mapState({
          store:"data"
        })
      },
        methods:{
          loginFn(){
            if(!this.username.length){
              this.$toast.fail("请输入用户名");
              return;
            }else if(!this.password.length){
              this.$toast.fail("请输入密码");
              return;
            }
            axios.get(passportApi.defaults.baseURL+'/token',{
            // axios.get('http://passport.api.bxfzrj.com:8080/api/token',{
              params:{
                account:this.username,
                password:this.password
              }
            })
              .then((response)=> {
                if(!response.data.code){
                  // console.log(response.data.data);
                  // return;
                  localStorage.setItem("apiKey","Bearer "+response.data.data.api_token);
                  // var emp = JSON.parse(response.data.data.user.account_type);
                  // // console.log(emp)
                  // if(parseInt(emp.emp)){
                  //   localStorage.setItem("type",3);
                  // }else{
                  // }
                  localStorage.setItem("type",response.data.data.company.type);

                  for(var i=0;i<services.length;i++){
                    services[i].defaults.headers.common['Authorization']=localStorage.getItem("apiKey");
                  }
                  localStorage.setItem("username",response.data.data.user.account);
                  localStorage.setItem("company",response.data.data.company.company);
                  localStorage.setItem("names",response.data.data.user.name);
                  localStorage.setItem("phone",response.data.data.company.phone);
                  localStorage.setItem("tenant_id",response.data.data.user.tenant_id);
                  localStorage.setItem("user_id",response.data.data.user.id);
                  localStorage.setItem("isLogin","1");
                  // 员工id (考勤会用到)
                  // console.log(response.data.data.user.account_type)
                  var empId = JSON.parse(response.data.data.user.account_type)
                  // console.log(empId)
                  localStorage.setItem("empId",empId.emp);

                  // return;
                  this.$router.push({name: 'home'});
                  this.username = ''
                  this.password = ''
                  this.store.active = 0
                }else{
                  this.$toast.fail("账号密码不匹配");
                }
              })
              .catch((error)=>{
                console.log(error);
                // this.$toast.fail("数据异常！");
              });


          },

          registerFn(){
            // console.log(1)
            this.$router.push({name: 'registers'});
            this.disp = "none"
            this.disp2 = "block"
            // 清空数据
            window.clearInterval(this.clock)
            this.bgc= ''
            this.content= '发送验证码'
            this.totalTime= 60
            this.canClick= true
            this.radio= '0'
            this.company= ''
            this.usernames= ''
            this.phone= ''
            this.email= ''
            this.code= ''
            this.accountNumber= ''
            this.passwords= ''
            this.password2= ''
          },

          getCode(){
            if (this.phone.length == 11) {
              this.countDown()
            } else {
              this.$toast.fail("手机号码长度不足11位！");
            }
          },
          countDown() {
            if (!this.canClick) return  //改动的是这两行代码
            this.canClick = false
            this.content = this.totalTime + 's后重新发送'
            this.bgc="bgc"
            this.clock = window.setInterval(() => {
              this.totalTime--
              this.content = this.totalTime + 's后重新发送'
              if (this.totalTime < 0) {
                window.clearInterval(this.clock)
                this.bgc=""
                this.content = '重新发送验证码'
                this.totalTime = 60
                this.canClick = true  //这里重新开启
              }
            },1000)
            var $this = this;
            // axios.post('http://setting.api.bxfzrj.com:8080api/sms/send/register/' + $this.phone,{})
            this.$http.setting.post('sms/send/register/' + $this.phone,{})
              .then(function (response) {
                // 短信码
                // console.log(response);
              })
              .catch(function (error) {
                console.log(error);
                // this.$toast.fail("网络异常！");
              });
          },
          sublimt(){
            if (!this.company.length) {
              this.$toast.fail("请输入公司名！");
            } else if (!this.usernames.length) {
              this.$toast.fail("请输入姓名！");
            } else if (!this.phone.length) {
              this.$toast.fail("请输入手机号！");
            } else if (!this.code.length) {
              this.$toast.fail("请输入验证码！");
            } else if (!this.accountNumber.length) {
              this.$toast.fail("请输入账号！");
            } else if (!this.passwords.length || !this.password2.length) {
              this.$toast.fail("请输入密码！");
            } else if (this.passwords !== this.password2) {
              this.$toast.fail("两次密码不一致！");
            } else if (this.passwords.length < 6 || this.password2.length < 6) {
              this.$toast.fail("密码长度最少为6位！");
            } else {
              // this.showTopTips = false
              var $this = this;
              this.$http.passport.post('/register',{
                phone: $this.phone,
                account: $this.accountNumber,
                password: $this.passwords,
                vaildpassword: $this.password2,
                code: $this.code,
                company: $this.company,
                name: $this.usernames,
                type: $this.radio,
                email: $this.email
              })
                .then((response)=> {
                  // console.log(response)
                  if (response.data.code != 0) {
                    $this.$toast.fail(response.data.message);
                  }else{
                    $this.$toast.success('注册成功！')
                    $this.disp2 = "none"
                    $this.disp = "block"

                    // 清空数据
                    window.clearInterval(this.clock)
                    $this.bgc= ''
                    $this.content= '发送验证码'
                    $this.totalTime= 60
                    $this.canClick= true
                    $this.radio= '0'
                    $this.company= ''
                    $this.usernames= ''
                    $this.phone= ''
                    $this.email= ''
                    $this.code= ''
                    $this.accountNumber= ''
                    $this.passwords= ''
                    $this.password2= ''
                  }
                })
                .catch((error)=>{
                  console.log(error);
                  // this.$toast.fail("数据异常！");
                });
            }

          },
          toSign () {
            this.disp2 = "none"
            this.disp = "block"

          }
        },
        mounted(){
          if(this.companyName.length&&this.username.length&&this.password.length){
              this.$router.push({name: 'home'});
            }

        }
    }
</script>

<style scoped>
  .login{
    /*padding:10px;*/
  }
  .login-logo{
    width:100%;
    background: #3C8DBC;
    padding:50px 0;
  }
  .my-content{
    /*margin-top:30%;*/
    border-bottom-left-radius:1px solid #e2e2e2;
    border-bottom-right-radius:1px solid #e2e2e2;
    padding:30px 10px 10px;
    box-shadow:5px 5px 15px #ddd;
    background: #fff;
  }
  .login-inp{
    width:80%;
    display: flex;
    border-bottom:1px solid #e2e2e2;
    padding:10px;
    margin:0 auto;
  }
  .login-inp2{
    margin:15px auto;
  }
  .login-inp>i{
    line-height: 26px;
    color:#3C8DBC;
  }
  .login-inp>input{
    width:90%;
    margin-left:10px;
    font-size:16px;
    border:0;
  }
  .login-tj,.login-zc{
    margin:20px 0;
  }
  .login-tj>button{
    width:80%;
    height:50px;
    line-height: 50px;
    background: #3C8DBC;
    color:#fff;
  }
  .login-zc>button{
    width:80%;
    height:50px;
    line-height: 50px;
  }

  .van-button--normal {
    font-size: 0.4rem!important;
  }
  .van-radio .van-icon-checked {
    color: #3C8DBC!important;
  }
  .registers{
    padding:10px;
  }
  .touXiang{
    width:60%;
    height:80px;
  }
  .login .van-cell{
    font-size:12px;
    border-bottom: 1px solid #F2F2F2;
  }
  .van-cell:not(:last-child)::after {
    border-bottom-width:0!important;
  }

  .bgc{
    background: #9ED99D;
    border-color: #9ED99D;
  }
  .registers-content{
    font-size:14px;
  }

  .r-gongsi{
    width:90%;
    display: flex;
    border:1px solid #e2e2e2;
    border-radius:5px;
    padding:10px;
    margin:0 auto;
    background: #fff;
  }
  .r-gongsi>span{
    font-size:14px;
  }

  .r-gongsi>input{
    width:80%;
    margin-left:10px;
    border:0;
  }
  .r-radio{
    display: flex;
    text-align: center;
    margin:10px auto;
    font-size:14px;

  }
  .r-radio>.r-radio-c{
    margin:5px 20px
  }

  .r-names{
    width:90%;
    display: flex;
    border:1px solid #e2e2e2;
    border-radius:5px;
    padding:10px;
    margin:10px auto;
    background: #fff;
  }
  .r-names>span{
    font-size:14px;
  }

  .r-names>input{
    width:80%;
    margin-left:10px;
    border:0;
  }
  .rr-pwd>input{
    width:70%;
  }
  .r-code{
    width:92%;
    margin:10px auto;
  }

  .r-code>input{
    margin-left:0px;
    font-size:14px;
    border:1px solid #e2e2e2;
    float: left;
    width:50%;
    border-radius:5px;
    padding:10px;
  }

  .r-code>button {
    width:35%;
    height:40px;
    line-height:40px;
    background: #3C8DBC;
    color:#fff;
  }
  .r-tj{
    margin:20px 0;
  }
  .r-tj>button{
    width:90%;
    height:40px;
    line-height: 40px;
    background: #3C8DBC;
    color:#fff;
  }
  .r-dl{
    margin:20px 0;
  }
  .r-dl>button{
    width:90%;
    height:40px;
    line-height: 40px;
    color:skyblue;
  }

</style>
